<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('新增考勤组')" />
    <th:block th:include="include :: datetimepicker-css" />
    <th:block th:include="include :: bootstrap-select-css" />
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-group-add">
            <div class="form-group">    
                <label class="col-sm-3 control-label is-required">考勤组类型：</label>
                <div class="col-sm-8">
                    <select name="type" id="type" class="form-control noselect2 selectpicker" onchange="typeChange()">
                        <option value="0">固定班制</option>
                        <option value="1">排班制</option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">考勤组名称：</label>
                <div class="col-sm-8">
                    <input name="name" class="form-control" type="text" required>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label labelReqerd is-required">参与考勤人员：</label>
                <div class="col-sm-8">
                    <div class='input-group'>
                        <input class='form-control' type='hidden' name='empId' id='empId' required>
                        <input class='form-control' type='text' name='empName' id='empName' readonly="readonly" required>
                        <span class='input-group-addon input-sm' onclick='selectEmpTree("", this)'>
                            <i class='fa fa-search'>选择</i>
                        </span>
                    </div>
                </div>
            </div>

            <div id="type0">
                <div class="form-group">
                    <label class="col-sm-3 control-label">默认班次：</label>
                    <div class="col-sm-8">
                        <select name="defaultClass" id="defaultClass" class="form-control noselect2 selectpicker">
                            <option value="">请选择</option>
                            <option th:each="list:${classList}" th:value="${list.id}" th:text="${list.name}"></option>
                        </select>
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-3 control-label">周一：</label>
                    <div class="col-sm-8">
                        <div class='input-group'>
                            <input class='form-control week-id' type='hidden' name='monClassId' id='monClassId' required>
                            <input class="form-control week-name" type="text" name="monClassName" id="monClassName" readonly>
                            <span class='input-group-addon input-sm' onclick='selectAttendanceClass("monday")'>
                                <i class='fa fa-search'>选择</i>
                            </span>
                            <span class='input-group-addon input-sm' onclick="removeClass('monClassId','monClassName')">
                                <i class='fa fa-times-circle'>清除</i>
                            </span>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">周二：</label>
                    <div class="col-sm-8">
                        <div class='input-group'>
                            <input class='form-control week-id' type='hidden' name='tueClassId' id='tueClassId' required>
                            <input class="form-control week-name" type="text" name="tueClassName" id="tueClassName" readonly>
                            <span class='input-group-addon input-sm' onclick='selectAttendanceClass("tuesday")'>
                                <i class='fa fa-search'>选择</i>
                            </span>
                            <span class='input-group-addon input-sm' onclick="removeClass('tueClassId','tueClassName')">
                                <i class='fa fa-times-circle'>清除</i>
                            </span>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">周三：</label>
                    <div class="col-sm-8">
                        <div class='input-group'>
                            <input class='form-control week-id' type='hidden' name='wedClassId' id='wedClassId' required>
                            <input class="form-control week-name" type="text" name="wedClassName" id="wedClassName" readonly>
                            <span class='input-group-addon input-sm' onclick='selectAttendanceClass("wednesday")'>
                                <i class='fa fa-search'>选择</i>
                            </span>
                            <span class='input-group-addon input-sm' onclick="removeClass('wedClassId','wedClassName')">
                                <i class='fa fa-times-circle'>清除</i>
                            </span>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">周四：</label>
                    <div class="col-sm-8">
                        <div class='input-group'>
                            <input class='form-control week-id' type='hidden' name='thuClassId' id='thuClassId' required>
                            <input class="form-control week-name" type="text" name="thuClassName" id="thuClassName" readonly>
                            <span class='input-group-addon input-sm' onclick='selectAttendanceClass("thursday")'>
                                <i class='fa fa-search'>选择</i>
                            </span>
                            <span class='input-group-addon input-sm' onclick="removeClass('thuClassId','thuClassName')">
                                <i class='fa fa-times-circle'>清除</i>
                            </span>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">周五：</label>
                    <div class="col-sm-8">
                        <div class='input-group'>
                            <input class='form-control week-id' type='hidden' name='friClassId' id='friClassId' required>
                            <input class="form-control week-name" type="text" name="friClassName" id="friClassName" readonly>
                            <span class='input-group-addon input-sm' onclick='selectAttendanceClass("friday")'>
                                <i class='fa fa-search'>选择</i>
                            </span>
                            <span class='input-group-addon input-sm' onclick="removeClass('friClassId','friClassName')">
                                <i class='fa fa-times-circle'>清除</i>
                            </span>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">周六：</label>
                    <div class="col-sm-8">
                        <div class='input-group'>
                            <input class='form-control week-id' type='hidden' name='satClassId' id='satClassId' required>
                            <input class="form-control week-name" type="text" name="satClassName" id="satClassName" readonly>
                            <span class='input-group-addon input-sm' onclick='selectAttendanceClass("saturday")'>
                                <i class='fa fa-search'>选择</i>
                            </span>
                            <span class='input-group-addon input-sm' onclick="removeClass('satClassId','satClassName')">
                                <i class='fa fa-times-circle'>清除</i>
                            </span>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">周日：</label>
                    <div class="col-sm-8">
                        <div class='input-group'>
                            <input class='form-control week-id' type='hidden' name='sunClassId' id='sunClassId' required>
                            <input class="form-control week-name" type="text" name="sunClassName" id="sunClassName" readonly>
                            <span class='input-group-addon input-sm' onclick='selectAttendanceClass("sunday")'>
                                <i class='fa fa-search'>选择</i>
                            </span>
                            <span class='input-group-addon input-sm' onclick="removeClass('sunClassId','sunClassName')">
                                <i class='fa fa-times-circle'>清除</i>
                            </span>
                        </div>
                    </div>
                </div>


                <div class="form-group">
                    <label class="col-sm-3 control-label">必须打卡的日期：</label>
                    <div class="col-sm-8">
                        <div class='input-group'>
                            <input name="mustDateClass" class="form-control" type="text" readonly>
                            <input name="mustDate" class="form-control" type="hidden" readonly>
                            <span class='input-group-addon input-sm' data-toggle="modal" data-backdrop="static" data-keyboard="false" data-target="#addMustDate">
                                <i class='fa fa-search'>添加</i>
                            </span>
                            <span class='input-group-addon input-sm' onclick="removeMustDate()">
                                <i class='fa fa-times-circle'>清除</i>
                            </span>
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-3 control-label">不用打卡的日期：</label>
                    <div class="col-sm-8">
                        <div class='input-group'>
                            <input name="needNotDate" class="form-control" type="text" readonly>
                            <span class='input-group-addon input-sm' data-toggle="modal" data-backdrop="static" data-keyboard="false" data-target="#addNeedNotDate">
                                <i class='fa fa-search'>添加</i>
                            </span>
                            <span class='input-group-addon input-sm' onclick="removeNeedNotDate()">
                                <i class='fa fa-times-circle'>清除</i>
                            </span>
                        </div>
                    </div>
                </div>
            </div>

            <div id="type1" style="display: none">
                <div class="form-group">
                    <label class="col-sm-3 control-label labelReqerd is-required">排班班次：</label>
                    <div class="col-sm-8">
                        <div class="input-group">
                            <input class='form-control' type='hidden' name='scheduClassId' id='scheduClassId' required>
                            <input class="form-control" type="text" name="scheduClassName" id="scheduClassName" readonly required>
                            <span class='input-group-addon input-sm' onclick='selectScheduClass()'>
                                <i class='fa fa-search'>选择</i>
                            </span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-3 control-label">有效范围：</label>
                <div class="col-sm-8">
                    <select name="scope" class="form-control noselect2 selectpicker">
                        <option value="100">100米</option>
                        <option value="200">200米</option>
                        <option value="300">300米</option>
                        <option value="400">400米</option>
                        <option value="500">500米</option>
                        <option value="600">600米</option>
                        <option value="700">700米</option>
                        <option value="800">800米</option>
                        <option value="900">900米</option>
                        <option value="1000">1000米</option>
                        <option value="2000">2000米</option>
                        <option value="3000">3000米</option>
                    </select>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-3 control-label is-required">考勤地址：</label>
                <div class="col-sm-8">
                    <input type="hidden" name="longitude" id="longitude">
                    <input type="hidden" name="latitude" id="latitude">
                    <div class="input-group">
                        <input type="text" class="form-control" name="address" id="address" readonly required>
                        <span class="input-group-btn">
                            <button type="button" onclick="openMap()" class="btn btn-primary">添加</button>
                        </span>
                    </div>
                </div>
            </div>

        </form>
    </div>

    <div class="modal inmodal fade" id="addMustDate" tabindex="-1" role="dialog" aria-hidden="true" >
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
                    </button>
                    <h4 class="modal-title">必须打卡日期</h4>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label class="control-label">日期：</label>
                        <div class="input-group date">
                            <input name="date1" class="form-control" placeholder="yyyy-MM-dd" type="text" readonly>
                            <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="control-label">班次：</label>
                        <div class="input-group">
                            <input class='form-control' type='hidden' name='mustClassId' id='mustClassId' required>
                            <input class="form-control" type="text" name="mustClassName" id="mustClassName" readonly>
                            <span class='input-group-addon input-sm' onclick='selectAttendanceClass("must")'>
                                <i class='fa fa-search'>选择</i>
                            </span>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" onclick="saveMustDate()">保存</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal inmodal fade" id="addNeedNotDate" tabindex="-1" role="dialog" aria-hidden="true" >
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
                    </button>
                    <h4 class="modal-title">不用打卡日期</h4>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <div class="input-group date">
                            <input name="date2" class="form-control" placeholder="yyyy-MM-dd" type="text" readonly>
                            <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" onclick="saveNeedNotDate()">保存</button>
                </div>
            </div>
        </div>
    </div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: datetimepicker-js" />
    <th:block th:include="include :: bootstrap-select-js" />
    <script type="text/javascript">
        var prefix = ctx + "hr/attendanceGroup"
        $("#form-group-add").validate({
            focusCleanup: true
        });

        function submitHandler() {
            if ($.validate.form()) {
                $.operate.save(prefix + "/add", $('#form-group-add').serialize());
            }
        }

        $("input[name='date1']").datetimepicker({
            format: "yyyy-mm-dd",
            minView: 2,
            autoclose: true
        });

        $("input[name='date2']").datetimepicker({
            format: "yyyy-mm-dd",
            minView: 2,
            autoclose: true
        });

        // 选择字典处理函数
        function selectEmpTree(columnId, obj) {
            var url = ctx + "system/user/selectTree";
            var options = {
                title: '选择流程抄送人员',
                width: "380",
                url: url,
                callBack: empSubmit
            };
            $.modal.openOptions(options);
        }

        function empSubmit(index){

            var body = layer.getChildFrame('body', index);
            var userId = body.find('#userId').val();
            var empName = body.find('#empNames').val();
            layer.close(index);
            $("#empId").val(userId);
            $("#empName").val(empName);
            $.ajax({
                url: prefix + "/compareEmp",
                data: {"empId":$("#empId").val()},
                type: 'POST',
                success: function (result) {
                    if (result.msg == "exist") {
                        console.log(result)
                        $("#empId").val("");
                        $("#empName").val("");
                        $.modal.alertWarning("选择的员工["+result.data+"]已存在考勤组，请重新选择");
                    }
                }
            });
        }

        $("#defaultClass").change(function () {
           var id = $("select[name = defaultClass]").val();
           var name = $("#defaultClass :selected").text();
            $(".week-id").val(id);
            $(".week-name").val(name);
        })

        function selectAttendanceClass(day){
            if(day == "monday"){
                var url = ctx + "hr/attendanceClass/selectClass?classId=monClassId&className=monClassName";
            }
            if(day == "tuesday"){
                var url = ctx + "hr/attendanceClass/selectClass?classId=tueClassId&className=tueClassName";
            }
            if(day == "wednesday"){
                var url = ctx + "hr/attendanceClass/selectClass?classId=wedClassId&className=wedClassName";
            }
            if(day == "thursday"){
                var url = ctx + "hr/attendanceClass/selectClass?classId=thuClassId&className=thuClassName";
            }
            if(day == "friday"){
                var url = ctx + "hr/attendanceClass/selectClass?classId=friClassId&className=friClassName";
            }
            if(day == "saturday"){
                var url = ctx + "hr/attendanceClass/selectClass?classId=satClassId&className=satClassName";
            }
            if(day == "sunday"){
                var url = ctx + "hr/attendanceClass/selectClass?classId=sunClassId&className=sunClassName";
            }
            if(day == "must") {
                var url = ctx + "hr/attendanceClass/selectClass?classId=mustClassId&className=mustClassName";
            }
            $.modal.open("选择班次", url);
        }

        function selectScheduClass(){
            $.modal.open("选择排班班次", ctx + "hr/attendanceClass/selectScheduClass");
        }

        function openMap(){
            var scope = $("select[name=scope]").val();
            var url = ctx + "hr/attendanceGroup/map?scope="+scope;
            $.modal.open("选择考勤位置", url);
        }

        var mustDateArray = new Array();
        var needNotDateArray = new Array();
        var mustDateClassIdArray = new Array();
        var mustDateClassNameArray = new Array();

        function saveMustDate() {
            var mustDate = $("input[name=date1]").val();
            var mustClassId = $("input[name=mustClassId]").val();
            var mustClassName = $("input[name=mustClassName]").val();
            if(mustDate == null){
                $.modal.alertWarning("请选择日期");
                return;
            }
            if(mustClassId == null || mustClassId == ""){
                $.modal.alertWarning("请选择班次");
                return;
            }
            //如果必须打卡的日期数组中有这个日期，则不允许添加，以免重复
            if($.inArray(mustDate,mustDateArray) >= 0){
                $.modal.alertWarning("选择的日期已存在，请重新选择");
                return;
            }
            //如果不用打卡的日期数组中有这个日期，则不允许添加，以免矛盾
            if($.inArray(mustDate,needNotDateArray) >= 0){
                $.modal.alertWarning("选择的日期有冲突");
                return;
            }
            mustDateArray.push(mustDate);
            mustDateClassIdArray.push(mustDate+":"+mustClassId);
            mustDateClassNameArray.push(mustDate+":"+mustClassName);
            $("input[name=mustDateClass]").val(mustDateClassNameArray);
            $("input[name=mustDate]").val(mustDateClassIdArray);
            $('#addMustDate').modal("hide");
        }

        function saveNeedNotDate() {
            var needNotDate = $("input[name=date2]").val();
            if(needNotDate == null){
                $.modal.alertWarning("请选择日期");
                return;
            }
            //如果不用打卡的日期数组中有这个日期，则不允许添加，以免重复
            if($.inArray(needNotDate,needNotDateArray) >= 0){
                $.modal.alertWarning("选择的日期已存在，请重新选择");
                return;
            }
            //如果必须打卡的日期数组中有这个日期，则不允许添加，以免矛盾
            if($.inArray(needNotDate,mustDateArray) >= 0){
                $.modal.alertWarning("选择的日期有冲突");
                return;
            }
            needNotDateArray.push(needNotDate);
            $("input[name=needNotDate]").val(needNotDateArray);
            $('#addNeedNotDate').modal("hide");
        }

        function removeClass(classId,className) {
            $("input[name="+classId+"]").val("");
            $("input[name="+className+"]").val("");
        }

        function removeMustDate() {
            $("input[name=mustDate]").val("");
            $("input[name=mustDateClass]").val("");
            mustDateArray = [];
        }

        function removeNeedNotDate() {
            $("input[name=needNotDate]").val("");
            needNotDateArray = [];
        }

        function typeChange() {
            let type = $("select[name=type]").val();
            if(type == 0){
                $("#type0").removeAttr("style");
                $("#type1").attr("style","display: none");
            }if(type == 1){
                $("#type1").removeAttr("style");
                $("#type0").attr("style","display: none");
            }
        }
    </script>
</body>
</html>